import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import './index.less';
import { useMemo } from 'react';
import rehypeRaw from 'rehype-raw';
import React, { useEffect, useRef, useState } from 'react';

function MarkDown(props) {
  let { value } = props;

  const components = useMemo(
    () => ({
      think: 'blockquote',
    }),
    [],
  );

  const processedValue = useMemo(() => {
    return value.replace(/<think>([\s\S]*?)<\/think>/g, (_, content) => {
      const lines = content.trim().split('\n');
      const quotedLines = lines.map((line) => `> ${line}`).join('\n');
      return quotedLines;
    });
  }, [value]);

  return (
    <div className="markdown-wrapper text-left">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeRaw]}
        components={components}
      >
        {processedValue}
      </ReactMarkdown>
    </div>
  );
}

export default MarkDown;
